import React, { useState, useEffect } from 'react';
import {
  Table,
  Tag,
  Space,
  Radio,
  Button,
  Select,
  Input,
  Form,
  DatePicker,
  Upload,
  message,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { history } from 'umi';
import request from '../../../../http';
import './index.css';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const LeaveApplication = () => {
  const columns = [
    {
      title: '操作人',
      dataIndex: '操作人',
      key: '1',
    },
    {
      title: '操作事项',
      dataIndex: '操作事项',
      key: '2',
    },
    {
      title: '操作时间',
      dataIndex: '操作时间',
      key: '3',
    },
    {
      title: '说明',
      dataIndex: '说明',
      key: '4',
    },
  ];

  //获取传过来的数据
  const leaveInfoId = parseInt(history.location.query.leaveInfoId);
  //定义表格data数据
  const [data, setdata] = useState([{}]);
  //学生信息
  const [student, setstudent] = useState([{}]);

  //周期搜索
  useEffect(() => {
    //学生信息/ack/student/insert
    console.log(leaveInfoId);
    request
      .post('/ack/teacher/teacherDetails', {
        leaveInfoId,
      })
      .then((res) => {
        console.log('学生信息请求成功', res);
        const arr = res.data;
        //操作记录
        const newData = [
          {
            操作人: arr.accountId,
            操作事项: arr.operationalMatters,
            事项状态: arr.operationtime,
            操作时间: arr.operationtime,
            说明: arr.failPassExplain,
          },
        ];
        setstudent(arr);
        setdata(newData);
      });
  }, []);

  //取消返回
  const back = () => {
    history.push('/teacher/absence/index');
  };

  return (
    <div>
      <div>
        学生请假
        <div className="prjName">
          姓名:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.userName}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320 }}>
          学号:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.account}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600 }}>
          院系:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.dkey}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 920 }}>
          专业:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.gkey}
          />
        </div>
        <div className="prjName" style={{ marginTop: 100 }}>
          年级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.gradeKey}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320, marginTop: 100 }}>
          班级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.name}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600, marginTop: 100 }}>
          班主任:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.teacherName}
          />
        </div>
      </div>
      <Form>
        <div className="prjName" style={{ marginTop: 190 }}>
          *主题:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 1000,
              marginLeft: 12,
            }}
            value={student.theme}
            disabled={true}
            placeholder="示例：【陈XX】因病请假1天"
          />
        </div>
        <div className="groupName" style={{ marginLeft: 38, marginTop: 260 }}>
          *开始日期:&nbsp;&nbsp;&nbsp;
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            value={student.startDateTime}
            disabled={true}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 440, marginTop: 260 }}>
          *结束日期:&nbsp;&nbsp;&nbsp;
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            value={student.endDateTime}
            disabled={true}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 38, marginTop: 330 }}>
          *请假原因:&nbsp;&nbsp;&nbsp;
          <Radio.Group
            name="radiogroup"
            defaultValue={1}
            disabled={true}
            value={student.reason}
          >
            <Radio name="student" checked={'病假'} value="病假">
              病假(需附医院证明)
            </Radio>
            <Radio name="teacher" value="事假">
              事假
            </Radio>
            <Radio name="admin" value="其他">
              其他
            </Radio>
          </Radio.Group>
          <TextArea rows={4} disabled={true} value={student.explain} />
        </div>

        <div className="groupName" style={{ marginLeft: 38, marginTop: 480 }}>
          *相关附件:&nbsp;&nbsp;&nbsp;
          <Upload>
            <Button icon={<UploadOutlined />} disabled={true}>
              上传文件
            </Button>
          </Upload>
        </div>

        <div className="prjName" style={{ marginTop: 580 }}>
          *审批人:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.accountId}
          />
        </div>
      </Form>
      <div className="prjName" style={{ marginTop: 650 }}>
        <Button
          type="primary"
          style={{
            marginBottom: 16,
          }}
          disabled
        >
          操作记录
        </Button>
        <Table columns={columns} dataSource={data} pagination={false} />
        <div>
          <Button onClick={back}>返回</Button>
        </div>
      </div>
    </div>
  );
};

export default LeaveApplication;
